<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>E-commerce Site</title>
	<link rel="stylesheet" type="text/css" href="styles/reset.css">
	<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
	<div class="headerBar">
		<div class="topBar">
			<div class="commonWidth">
				<div class="leftArea .clearfix">
					<a href="#" class="collection">收藏慕课</a>
				</div>
				<div class="rightArea .clearfix">
					欢迎来到慕课网！<a href="">[登录]</a><a href="">[免费注册]</a>
				</div>
			</div>
		</div><!-- topBar结束 -->
		<div class="logoBar">
			<div class="commonWidth">
				<div class="logo fl">
					<a href="#"><img src="images/logo.png" alt="图片不显示时显示的文字"></a>
				</div>
				<div class="searchBox fl">
					<input type="text" class="search_text fl">
					<input type="button" value="搜 索" class="search_btn fr"> 
				</div>
				<div class="shopCar fr">
					<span class="shopText fl">购物车</span>
					<span class="shopNum fl">1</span>
				</div>
			</div>
		</div><!-- logoBar结束 -->
		<div class="navBox">
			<div class="commonWidth">
				<div class="shopClass fl">
					<h3>全部商品分类</h3>
					<div class="shopClass_show">
						<dl class="shopClass_item">
							<dt>
								<a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="aLink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shopClass_item shopClass_item_active">
							<dt>
								<a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="aLink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shopClass_item">
							<dt>
								<a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="aLink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shopClass_item">
							<dt>
								<a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="aLink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shopClass_item">
							<dt>
								<a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="aLink">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
					</div><!-- shopClass左侧列表结束 -->
					<div class="shopClass_list hide">
						<div class="shopClass_cont">
							<dl class="shopList_item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
								</dd>
							</dl>
							<dl class="shopList_item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>	
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>		
								</dd>
							</dl>
							<dl class="shopList_item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>	
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>	
								</dd>
							</dl>
							<dl class="shopList_item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>									
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>	
									<a href="#">一堆文字</a>	
								</dd>
							</dl>
							<dl class="shopList_item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>	
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>	
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>	

								</dd>
							</dl>
							<dl class="shopList_item">
								<dt>电脑装机</dt>
								<dd>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>
									<a href="#">一堆文字</a>	
								</dd>
							</dl>
							<div class="shopList_links">
								<a href="#">电脑整机频道<span></span></a>
								<a href="#">硬件/外设频道<span></span></a>
							</div>
						</div>
					</div><!-- shopClass_list右侧内容结束 --> 
				</div>
				<ul class="nav fl">
					<li><a href="#" class="active">数码城</a></li>
					<li><a href="#">天黑黑</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">发现</a></li>
					<li><a href="#">二手特卖</a></li>
					<li><a href="#">名品会</a></li>
				</ul>
			</div>
		</div><!-- navBox结束 -->
	</div><!-- headerBar结束 -->
	<div class="banner commonWidth clearfix">
		<div class="banner_bar banner_big">
			<ul class="imgBox">
				<li><a href=""><img src="images/banner/banner1.png" alt="first"></a></li>
				<li><a href=""><img src="images/banner/banner2.png" alt="second"></a></li>
			</ul>
			<div class="imgNum">
				<a href="#" class="active"></a>
				<a href="#"></a>
			</div>
		</div><!-- banner_bar图片结束 -->
	</div><!-- banner结束 -->
	<div class="shopTitle commonWidth">
		<span class="icon"></span>
		<h3>家用电脑</h3>
		<a href="#" class="more">更多&gt;&gt;</a>
	</div>
	<div class="shopList commonWidth clearfix">
		<div class="leftArea">
			<div class="banner_bar banner_sm">
				<ul class="imgBox">
					<li><a href=""><img src="images/banner/adbanner1.png" alt="first"></a></li>
					<li><a href=""><img src="images/banner/adbanner2.png" alt="second"></a></li>
				</ul>
				<div class="imgNum">
					<a href="#" class="active"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
			</div>
		</div><!-- leftArea结束 -->
		<div class="rightArea">
			<div class="shopList_top">
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/HTC.png" alt=""></a>
					</div>
					<h3>HTM新渴望8系列</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/HTC.png" alt=""></a>
					</div>
					<h3>HTM新渴望8系列</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/HTC.png" alt=""></a>
					</div>
					<h3>HTM新渴望8系列</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/HTC.png" alt=""></a>
					</div>
					<h3>HTM新渴望8系列</h3>
					<p>1899元</p>
				</div>
			</div><!-- 右侧上部结束 -->
			<div class="shopList_bottom">
				<div class="shopItem_sm">
					<div class="shop_sm_img">
						<a href=""><img src="images/samsung.png" alt=""></a>					
					</div>
					<div class="shop_sm_text">
						<p>NFC技术一碰轻松配对！接触屏幕</p>
						<h3>¥149.00</h3>
					</div>
				</div>
				<div class="shopItem_sm">
					<div class="shop_sm_img">
						<a href=""><img src="images/samsung.png" alt=""></a>					
					</div>
					<div class="shop_sm_text">
						<p>NFC技术一碰轻松配对！接触屏幕</p>
						<h3>¥149.00</h3>
					</div>
				</div>
				<div class="shopItem_sm">
					<div class="shop_sm_img">
						<a href=""><img src="images/samsung.png" alt=""></a>					
					</div>
					<div class="shop_sm_text">
						<p>NFC技术一碰轻松配对！接触屏幕</p>
						<h3>¥149.00</h3>
					</div>
				</div>
				<div class="shopItem_sm">
					<div class="shop_sm_img">
						<a href=""><img src="images/samsung.png" alt=""></a>					
					</div>
					<div class="shop_sm_text">
						<p>NFC技术一碰轻松配对！接触屏幕</p>
						<h3>¥149.00</h3>
					</div>
				</div>
			</div><!-- 右侧下部结束 -->
		</div><!-- rightArea结束 -->
	</div><!-- shopList结束 -->
	<div class="shopTitle commonWidth">
		<span class="icon"></span>
		<h3>家用电脑</h3>
		<a href="#" class="more">更多&gt;&gt;</a>
	</div>
	<div class="shopList commonWidth clearfix">
		<div class="leftArea">
			<div class="banner_bar banner_sm">
				<ul class="imgBox">
					<li><a href=""><img src="images/banner/adbanner1.png" alt="first"></a></li>
					<li><a href=""><img src="images/banner/adbanner2.png" alt="second"></a></li>
				</ul>
				<div class="imgNum">
					<a href="#" class="active"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
			</div>
		</div><!-- leftArea结束 -->
		<div class="rightArea">
			<div class="shopList_top">
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/HTC.png" alt=""></a>
					</div>
					<h3>HTM新渴望8系列</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/HTC.png" alt=""></a>
					</div>
					<h3>HTM新渴望8系列</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/HTC.png" alt=""></a>
					</div>
					<h3>HTM新渴望8系列</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/HTC.png" alt=""></a>
					</div>
					<h3>HTM新渴望8系列</h3>
					<p>1899元</p>
				</div>
			</div><!-- 右侧上部结束 -->
			<div class="shopList_bottom">
				<div class="shopItem_sm">
					<div class="shop_sm_img">
						<a href=""><img src="images/samsung.png" alt=""></a>					
					</div>
					<div class="shop_sm_text">
						<p>NFC技术一碰轻松配对！接触屏幕</p>
						<h3>¥149.00</h3>
					</div>
				</div>
				<div class="shopItem_sm">
					<div class="shop_sm_img">
						<a href=""><img src="images/samsung.png" alt=""></a>					
					</div>
					<div class="shop_sm_text">
						<p>NFC技术一碰轻松配对！接触屏幕</p>
						<h3>¥149.00</h3>
					</div>
				</div>
				<div class="shopItem_sm">
					<div class="shop_sm_img">
						<a href=""><img src="images/samsung.png" alt=""></a>					
					</div>
					<div class="shop_sm_text">
						<p>NFC技术一碰轻松配对！接触屏幕</p>
						<h3>¥149.00</h3>
					</div>
				</div>
				<div class="shopItem_sm">
					<div class="shop_sm_img">
						<a href=""><img src="images/samsung.png" alt=""></a>					
					</div>
					<div class="shop_sm_text">
						<p>NFC技术一碰轻松配对！接触屏幕</p>
						<h3>¥149.00</h3>
					</div>
				</div>
			</div><!-- 右侧下部结束 -->
		</div><!-- rightArea结束 -->
	</div><!-- shopList结束 -->
	<div class="footer">
		<p>
			<a href="">慕课简介</a>|
			<a href="">慕课公告</a>|
			<a href="">招纳贤士</a>|
			<a href="">联系我们</a>|
			<a>客服热线：400-675-1234</a>
		</p>
		<p>Copyright&nbsp;©&nbsp;2006&nbsp;-&nbsp;2014&nbsp;慕课版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号   京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123</p>
		<p class="footer_logo">
			<a href=""><img src="images/webLogo.png" alt=""></a>
			<a href=""><img src="images/webLogo.png" alt=""></a>
			<a href=""><img src="images/webLogo.png" alt=""></a>
			<a href=""><img src="images/webLogo.png" alt=""></a>
		</p>
	</div>
</body>
</html>